<template>
  <div class='swiper-banner relative'>
    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="30"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',}"
      :pagination="{ enabled: true, type: 'bullets', clickable: true }"
      :autoplay="{ delay: 5000, disableOnInteraction: false, pauseOnMouseEnter: true }"
    >
      <template v-for='item in list'>
        <swiper-slide>
          <ArticleTopCarousel :item='item'/>
        </swiper-slide>
      </template>
    </swiper>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/autoplay'

import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules'
import ArticleTopCarousel from '@/components/ArticleCard/src/ArticleTopCarousel.vue'
export default{
  name: 'index',
  components: { ArticleTopCarousel, Swiper,SwiperSlide },
  props:['list'],
  setup() {
    const onSwiper = (swiper) => {
      console.log("swiper加载成功");
    }
    const onSlideChange = () => {

    }
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay]
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
